<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption"
		@down="downCallback">
		<view class="user-fans">
			<view class="header">
			<!-- 	<u-search v-model="keyword" shape="round" background="white" placeholder="请输入搜索关键词"
				 @search="changeTab('first')" @custom="changeTab" /> -->
				<view v-if="type==1" class="top-bar flex bg-white md">
					<!-- 经销商下面有其他用户时打开 -->
					<view class="bar-item flex" :class="{'item-active': act == 1}" @tap="changeTab('1')">
						普通会员数</view>
					<view class="bar-item " :class="{'item-active': act == 2}" @tap="changeTab('2')">
						意向会员数</view>
				</view>
				<view v-if="type==2&&userLevel==3" class="top-bar flex bg-white md" style="padding: 18rpx 180rpx;">
					<view class="bar-item " :class="{'item-active': act1 == 1}" @tap="changeTab1('1')">
						普通会员</view>
					<view class="bar-item " :class="{'item-active': act1 == 2}" @tap="changeTab1('2')">
						授权推客</view>
				</view>
				<view v-if="type==2&&userLevel==4" class="top-bar flex bg-white md" style="padding: 18rpx 100rpx;">
					<view class="bar-item " :class="{'item-active': act1 == 1}" @tap="changeTab1('1')">
						普通会员</view>
					<view class="bar-item " :class="{'item-active': act1 == 2}" @tap="changeTab1('2')">
						授权推客</view>
					<view class="bar-item flex" :class="{'item-active': act1 == 3}" @tap="changeTab1('3')">
						门店推客</view>
				</view>
				<!-- <view class="sort-bar flex bg-white">
					<view class="sort-bar-item flex row-center" @tap="sortChange(0)">
						<view :class="sortType == 0 ? 'item-active' : ''">团队排序</view>
						<view class="arrow-icon flex-col col-center row-center">
							<u-icon name="arrow-up-fill"
								:color="fansSort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
							<u-icon name="arrow-down-fill"
								:color="fansSort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
						</view>
					</view>
					<view class="sort-bar-item flex row-center" @tap="sortChange(1)">
						<view :class="sortType == 1 ? 'item-active' : ''">金额排序</view>
						<view class="arrow-icon flex-col col-center row-center">
							<u-icon name="arrow-up-fill"
								:color="moneySort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
							<u-icon name="arrow-down-fill"
								:color="moneySort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
						</view>
					</view>
					<view class="sort-bar-item flex row-center" @tap="sortChange(2)">
						<view :class="sortType == 2 ? 'item-active' : ''">订单排序</view>
						<view class="arrow-icon flex-col col-center row-center">
							<u-icon name="arrow-up-fill"
								:color="orderSort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
							<u-icon name="arrow-down-fill"
								:color="orderSort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
						</view>
					</view>
				</view> -->
			</view>
			
			<view class="content">
				<view class="p-t-20"v-if="count!==0" style="margin-left: 20rpx;">共 {{count}} 人</view>
				<view class="card-box p-t-20">
					<!-- <view class="sq_tit" v-if="userLevel==4" style="margin: 10rpx 26rpx 30rpx 26rpx;">授权推客</view> -->
					<!-- <view v-if="!sq_list" style="margin: 60rpx 0;text-align: center;color: #808080;">没有更多了~</view> -->
					<view style="margin: 12rpx 26rpx; border-radius: 14rpx;"
					 v-for="(item, index) in fansList" class="card-item flex row-between bg-white p-20">
						<view class="flex">
							<view class="flex" @click="getdetail(item.id)">
								<u-image :src="item.avatar" border-radius="50%" width="100rpx" height="100rpx" />
								<view class="fans-info m-l-20">
									<view class="flex-s fanbox">
										<view class="fans-name bold line-1">{{item.nickname}}</view>
										<!-- <view class="">{{item.name}}</view> -->
									</view>
									<view class="flex-start" v-if="item.invite_leader_type!=0">
										<view class="invitename" style="padding: 0;width: 150rpx;" v-if="item.invite_leader_type==1">直接邀请人：</view>
										<view class="invitename" style="padding: 0;width: 150rpx;" v-if="item.invite_leader_type==2">间接邀请人：</view>
										<image class="inviteavatar" :src="item.invite_leader_info.avatar" mode=""></image>
										<view class="invitename ellipsis" style="width: 246rpx;">{{item.invite_leader_info.nickname}}</view>
									</view>
									<view class="flex lighter" style=" margin-top: 6rpx; font-size: 24rpx; color: #8f8f8f">
										<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
										<view>{{item.create_time}}</view>
									</view>
								</view>
							</view>
							<view class="" v-if="item.is_jie_bang!==0&&type!==2">
								<view v-if="item.is_jie_bang==1" class="shift" @click="shift(item.id)">转移</view>
								<view v-if="item.is_jie_bang==2" class="shift" style="background: #fcd00c;">审核中</view>
							</view>
							<view class="noyix" v-if="item.name">{{item.name}}</view>
							<uni-popup ref="popup"  type="center">
								<view class="zybox">
									<view class="zytit" @click="$refs.popup.close()">转移信息提交</view>
									<view class="flex-s" style="margin-bottom: 30rpx;">
										<view class="zytext">接收人号码</view>
										<input class="zyinput" v-model="phone" type="text" placeholder="请填写手机号" />
									</view>
									<view class="flex-s" style="margin-bottom: 80rpx;">
										<view class="zytext">解绑原因</view>
										<input class="zyinput" v-model="remark" type="text"placeholder="请填写原因" />
									</view>
									<view class="shift submit" @click="submit">提交</view>
								</view>
							</uni-popup> 
						</view>
						<!-- <view class="flex-col xs flex-none m-l-20">
							<view class="msg"><span class="primary">{{item.fans_team}} </span>人</view>
							<view class="m-t-5 msg"><span>{{item.fans_order}} </span>单</view>
							<view class="m-t-5 msg"><span>{{item.fans_money}} </span>元</view>
						</view> -->
					</view>
<!-- 					<view class="sq_tit" v-if="userLevel==4" style="margin: 30rpx 26rpx;">其他客户</view>
					<view style="margin: 12rpx 26rpx; border-radius: 14rpx;" @click="getdetail(item.id)"
					 v-for="(item, index) in fansList" class="card-item flex row-between bg-white p-20">
						<view class="flex">
							<u-image :src="item.avatar" border-radius="50%" width="100rpx" height="100rpx" />
							<view class="fans-info m-l-20">
								<view class="flex-s fanbox">
									<view class="fans-name bold line-1">{{item.nickname}}</view>
								</view>
								<view class="flex-start" v-if="item.invite_leader_type!=0">
									<view class="invitename" style="padding: 0;" v-if="item.invite_leader_type==1">直接邀请人：</view>
									<view class="invitename" style="padding: 0;" v-if="item.invite_leader_type==2">间接邀请人：</view>
									<image class="inviteavatar" :src="item.invite_leader_info.avatar" mode=""></image>
									<view class="invitename">{{item.invite_leader_info.nickname}}</view>
								</view>
								<view class="flex lighter" style=" margin-top: 6rpx; font-size: 24rpx; color: #8f8f8f">
									<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
									<view>{{item.create_time}}</view>
								</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</mescroll-body> 
</template>


<script>
	import {
		sortType,
	} from '@/utils/type';
	import {
		getUserFans,UserPidApply,UsertagLog
	} from '@/api/user';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无相关数据', // 提示
					}
				},
				userLevel: "",
				count: "",
				active: 'first',
				act: 1,
				act1: 1,
				sortType: -1,
				keyword: "",
				fansSort: sortType.NONE,
				moneySort: sortType.NONE,
				orderSort: sortType.NONE,
				fansList: [],
				sq_list: [],
				type: '',
				laoid: '',
				phone: '',
				remark: '',
			};
		},
		onLoad(option) {
			this.type = Number(option.type)
			console.log('2',this.type)
			this.getData()
			this.userLevel =uni.getStorageSync('userInfo').level
			// console.log(this.userLevel)
		},
		methods: {
			shift(id){
				this.laoid = id
				this.$refs.popup[0].open('center')
			},
			async getData() {
				switch (this.type) {
					case 0: 
						uni.setNavigationBarTitle({
							title: '客户信息'
						});
						break;
					case 1:
						uni.setNavigationBarTitle({
							title: '客户分析'
						});
						break;
					case 2:
						uni.setNavigationBarTitle({
							title: '行为记录'
						});
						break;
				}
				// console.log('res.code',res.code)
				// if(res.code == 1) {
				// 	 this.content = res.data.content;
				// 	 console.log('content',this.content)
				// }
			},
			getdetail(option){
				if(this.type == 0){
					this.apifun.navigate('/pages/mine/customerManage','id='+option)
				}
				if(this.type == 1){
					this.apifun.navigate('/bundle/pages/consumer','id='+option)
				}
				if(this.type == 2){
					this.apifun.navigate('/bundle/pages/behaviors','id='+option)
					// this.$Router.replace({
					// 	path: '/bundle/pages/behaviors',
					// 	query: {
					// 		id: option
					// 	}
					// })
				}
			},
			onRefresh() {
				this.fansList = []
				this.mescroll.resetUpScroll();
			},
			submitqqq(){
				let that = this;
				that.$refs.popup.close()
				// this.$refs.center.close()
			},
			async submit(){
				// const {
				// 	laoid,
				// 	phone,
				// 	remark,
				// } = this;
				if(this.phone==''){
					this.apifun.toast('请填写手机号')
					return
				}
				if(this.remark==''){
					this.apifun.toast('请填解绑原因')
					return
				}
				// const params = {
				// 	old_user_id: this.laoid,
				// 	new_user_mobile: this.phone,
				// 	remark: this.remark,
				// };
				const {
					data,
					code,
					msg
				} = await UserPidApply({
					old_user_id: this.laoid,
					new_user_mobile: this.phone,
					remark: this.remark,
				});
				if (code == 1) {
					// this.$refs.popup.close()
					this.$toast({
						title: msg
					});
						this.downCallback()
						this.$refs.popup[0].close()
						// this.$refs.popup.close()
						this.phone==''
						this.remark==''
				}
				// UserPidApply(params).then(res => {
				// 	if (res.code === 1) {
				// 		console.log(121)
				// 		this.data = res.data
				// 		this.downCallback()
				// 		// this.$refs.popup[0].close()
				// 		this.$refs.popup.close()
				// 		this.phone==''
				// 		this.remark==''
				// 	}
				// })
			},
			// sqfans(){
			// 	const {
			// 		active,
			// 	} = this;
			// 	const params = {
			// 		type: active,
			// 	};
			// 	sqfans(params).then(({
			// 		data
			// 	}) => {
			// 		this.sq_list = data.list;
			// 	})
			// },
			// 上拉加载 
			upCallback(page) {
				const {
					fansSort,
					moneySort,
					orderSort,
					active,
					keyword,
				} = this;
				if(this.type==1){
					const params = {
						type: this.act,
						page_size: page.size,
						page_no: page.num,
					};
					UsertagLog(params).then(({
						data
					}) => {
						if (page.num == 1) this.fansList = [];
						this.count = data.count
						const curPageData = data.list;
						const curPageLen = curPageData.length;
						const hasNext = !!data.more;
						this.fansList = this.fansList.concat(curPageData);
						this.mescroll.endSuccess(curPageLen, hasNext);
					}).catch(() => {
						this.mescroll.endErr()
					})
				}else{
					if(this.userLevel ==4){
						const params = {  //搜索的时候能选中第一个是因为在 @search="changeTab"后擅自加了('first')，本来是不会选中的
							type: 'first',
							keyword,
							fans: fansSort,
							money: moneySort,
							order: orderSort,
							page_size: page.size,
							page_no: page.num,
							sq_type:this.type==0&&active=='second'? 1:'',   //加type是为了区分用户信息,消费分析,行为记录
							level: this.type==0&&this.userLevel=='4' ? 3:this.act1,
						};
						getUserFans(params).then(({
							data
						}) => {
							if (page.num == 1) this.fansList = [];
							this.count = data.count
							const curPageData = data.list;
							const curPageLen = curPageData.length;
							const hasNext = !!data.more;
							this.fansList = this.fansList.concat(curPageData);
							this.mescroll.endSuccess(curPageLen, hasNext);
						}).catch(() => {
							this.mescroll.endErr()
						})
					}else{
						const params = {
							type: active,
							keyword,
							fans: fansSort,
							money: moneySort,
							order: orderSort,
							page_size: page.size,
							page_no: page.num,
							level: this.type==2&&this.userLevel=='3' ? this.act1:'',
						};
						getUserFans(params).then(({
							data
						}) => {
							if (page.num == 1) this.fansList = [];
							this.count = data.count
							const curPageData = data.list;
							const curPageLen = curPageData.length;
							const hasNext = !!data.more;
							this.fansList = this.fansList.concat(curPageData);
							this.mescroll.endSuccess(curPageLen, hasNext);
						}).catch(() => {
							this.mescroll.endErr()
						})
					}
				}
			},

			changeTab(val) {
				this.act = val
				this.onRefresh()
			},
			changeTab1(val) {
				this.act1 = val
				this.onRefresh()
			},

			// 排序状态变化 
			sortChange(type) {
				let {
					fansSort,
					moneySort,
					orderSort
				} = this;

				this.sortType = parseInt(type)

				switch (this.sortType) {
					case 0:
						// 团队排序
						if (fansSort == sortType.DESC || fansSort == sortType.NONE) {
							this.fansSort = sortType.ASC;
							this.moneySort = sortType.NONE
							this.orderSort = sortType.NONE
						} else if (fansSort == sortType.ASC) {
							this.fansSort = sortType.DESC;
							this.moneySort = sortType.NONE;
							this.orderSort = sortType.NONE;
						}
						break;

					case 1:
						// 金额排序
						if (moneySort == sortType.DESC || moneySort == sortType.NONE) {
							this.moneySort = sortType.ASC;
							this.fansSort = sortType.NONE;
							this.orderSort = sortType.NONE
						} else if (moneySort == sortType.ASC) {
							this.moneySort = sortType.DESC;
							this.fansSort = sortType.NONE;
							this.orderSort = sortType.NONE;
						}

						break;
					case 2:
						// 订单排序
						if (orderSort == sortType.DESC || orderSort == sortType.NONE) {
							this.orderSort = sortType.ASC;
							this.moneySort = sortType.NONE;
							this.fansSort = sortType.NONE;
						} else if (orderSort == sortType.ASC) {
							this.orderSort = sortType.DESC;
							this.moneySort = sortType.NONE;
							this.fansSort = sortType.NONE;
						}

						break;
				}

				this.onRefresh()
			}
		}
	};
</script>

<style lang="scss">
	.submit{
		text-align: center;
		width: 140rpx;
	}
	.zybox{
		background-color: #fff;
		padding: 40rpx;
		border-radius: 14rpx;
	}
	.zyinput{
		border: 1rpx solid #e2e2e2;
		margin-left: 30rpx;
		font-size: 28rpx;
		padding: 6rpx 10rpx;
	}
	.zytit{
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 50rpx;
	}
	.shift{
		width: 96rpx;
		font-size: 28rpx;
		text-align: center;
		margin: 0 auto;
		background-color: #fa6560;
		color: #fff;
		padding: 6rpx 0;
		border-radius: 6rpx;
	}
	.noyix{
		width: 96rpx;
		font-size: 26rpx;
		text-align: center;
		margin: 0 auto;
		background-color: #fa6560;
		color: #fff;
		padding: 6rpx 0;
		border-radius: 6rpx;
	}
	.user-fans {
		.header {
			.top-bar {
				padding: 18rpx 130rpx;
				height: 100rpx;
				

				.bar-item {
					// flex: 1;
					// padding: 0 30rpx;
					padding: 0 22rpx;
					margin:0 auto;
					text-align: center;
					line-height: 60rpx;

					&:not(:last-of-type) {
						// margin-right: 54rpx;
					}
				}

				.item-active {
					color: white;
					background-color: $-color-primary;
					border-radius: 100rpx;
				}
			}

			.sort-bar {
				height: 80rpx;

				.sort-bar-item {
					flex: 1;

					.arrow-icon {
						transform: scale(0.36);
					}

					.item-active {
						color: $-color-primary;
					}
				}
			}
		}
	}

	.content {
		.card-box {
			.card-item {
				.fans-name {
					width: 300rpx;
				}
				&:not(:last-of-type) {
					// border-bottom: $-solid-border;
				}
			}
		}
	}
	.inviteavatar{
		width: 38rpx;
		height: 38rpx;
		border-radius: 30rpx;
		margin: 1rpx 6rpx;
	}
	.invitename{
		// color: #8f8f8f;
		font-size: 22rpx;
		padding:0 8rpx;
	}
	.fanbox{
		// width: 540rpx;
		width: 440rpx;
	}
	.sq_tit{
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 26rpx;
		// margin-bottom: 40rpx 26rpx;
	}
</style>
